<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="addheader.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-addheader"
        role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="addheader.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-addheader" role="tabpanel">

        <div class="mb-3">
          <h5 data-i18n="addheader.name"></h5>
          <form class="was-validated" novalidate="novalidate">
            <input type="text" id="sivNewHeaderName" class="form-control form-control-sm col-lg-8" required="required" pattern="[ -~]+"/>
            <div data-i18n="addheader.name.invalid" class="invalid-feedback"></div>
          </form>

          <h5 data-i18n="addheader.value"></h5>
          <form class="was-validated" novalidate="novalidate">
            <input type="text" id="sivNewHeaderValue" class="form-control form-control-sm col-lg-8" required="required"/>
            <div data-i18n="addheader.value.invalid" class="invalid-feedback"></div>
          </form>

          <h5 data-i18n="addheader.position"></h5>
          <div class="form-check mr-sm-2">
            <input type="radio" class="form-check-input" name="last" value="false" id="sieve-header-first" />
            <label data-i18n="addheader.first" class="form-check-label" for="sieve-header-first"></label>
          </div>

          <div class="form-check mr-sm-2">
            <input type="radio" class="form-check-input" name="last" value="true" id="sieve-header-last" />
            <label data-i18n="addheader.last" class="form-check-label" for="sieve-header-last"></label>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" id="sieve-widget-help" role="tabpanel">
        <p data-i18n="addheader.help" style="white-space: pre-line"></p>
        <p data-i18n="addheader.hint" style="white-space: pre-line" class="alert alert-info" role="alert"></p>
      </div>
    </div>
  </div>
</div>